<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- 引入 Bootstrap-validator 校验的 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <!--引入  Bootstrap-validator 支持中文校验的 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>

    <style>
        #col-md-4-2 {
            margin-top: 50px;
        }

        #avatar-container {
            text-align: center;
            margin-top: 50px;
        }

        #avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid #4CAF50;
        }

        /* 样式重置，避免Bootstrap的默认样式影响自定义样式 */
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        /* 自定义表单样式 */
        .form {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            margin-top: 30px;
        }

        /* 输入框样式 */
        .form-control {
            border-radius: 5px;
            box-shadow: none;
            border: 1px solid #ccc;
            transition: border-color 0.3s ease;
        }

        .form-control:focus {
            border-color: #4CAF50; /* 聚焦时边框颜色 */
        }

        /* 登录按钮样式 */
        .btn-default {
            background-color: #4CAF50; /* 背景色 */
            border-color: #4CAF50; /* 边框色 */
            color: white; /* 文字颜色 */
            transition: background-color 0.3s ease;
        }

        .btn-default:hover {
            background-color: #45a049; /* 鼠标悬停时背景色 */
            border-color: #45a049; /* 鼠标悬停时边框色 */
        }

        /* 注册按钮样式 */
        .btn-secondary {
            background-color: #f1f1f1; /* 背景色 */
            border-color: #ccc; /* 边框色 */
            color: #333; /* 文字颜色 */
        }

        .btn-secondary:hover {
            background-color: #e1e1e1; /* 鼠标悬停时背景色 */
        }

        /* 表单标题样式 */
        h1 {
            color: #4CAF50; /* 标题颜色 */
            margin-bottom: 20px;
        }

        /* 响应式布局，确保在小屏幕上也能良好显示 */
        @media (max-width: 768px) {
            .col-md-4 {
                display: none; /* 在小屏幕上隐藏两侧的空白列 */
            }

            .col-md-4-2 {
                margin-top: 50px; /* 减小上边距 */
            }

            .form {
                padding: 10px; /* 减小内边距 */
            }
        }

        /* 添加测试用户名和密码提示文本的样式 */
        #test-credentials {
            margin-top: 20px;
            text-align: center;
            color: #777;
        }
    </style>
    <script>
        $(function () {
            $("#form").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 8,
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            regexp: {
                                regexp: '^[a-zA-Z0-9]+$',
                                message: '密码只能为数字或者字母'
                            }
                        }
                    }
                }
            });

            $("#registerForm").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    regUsername: {
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 8,
                            }
                        }
                    },
                    //用户已存在
                    regPassword: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            regexp: {
                                regexp: '^[a-zA-Z0-9]+$',
                                message: '密码只能为数字或者字母'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: '确认密码不能为空'
                            },
                            identical: {
                                field: 'regPassword',
                                message: '两次密码输入不一致'
                            }
                        }
                    },
                    regEmail: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            emailAddress: {
                                message: '邮箱格式不正确'
                            }
                        }
                    },
                    regSex: {
                        validators: {
                            notEmpty: {
                                message: '性别不能为空'
                            }
                        }
                    }
                }
            });

            $("#loginButton").click(function () {
                let flag = $("#form").data("bootstrapValidator").isValid();
                if (!flag) {
                    alert("表单数据需要检查!");
                } else {
                    $.ajax({
                        url: "/admin/AdminController",
                        data: {
                            type: 'login',
                            username: $("#username").val(),
                            password: $("#password").val()
                        },
                        type: 'get',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status == 200) {
                                localStorage.setItem('id', respResult.data);
                                location.href = "admin.html";
                            } else {
                                alert("请激活再来登录!!!");
                            }
                        }
                    })
                }
            });

            $("#registerButton").click(function () {
                let flag = $("#registerForm").data("bootstrapValidator").isValid();
                if (!flag) {
                    alert("表单数据需要检查!");
                } else {
                    $.ajax({
                        url: "/admin/AdminController",
                        data: {
                            type: 'register',
                            username: $("#regUsername").val(),
                            password: $("#regPassword").val(),
                            email: $("#regEmail").val(),
                            sex: $("input[name='regSex']:checked").val()
                        },
                        method: 'post',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status == 200) {
                                alert("注册成功");
                                $("#registerModal").modal('hide');
                            } else {
                                alert("注册失败");
                            }
                        },
                        error: function (xhr, status, error) {
                            alert("AJAX请求失败：" + error);
                        }
                    });
                }
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="col-md-4-2">
            <div id="avatar-container">
                <img id="avatar" src="asserts/img/1.png" alt="Avatar">
            </div>
            <div class="row" style="text-align: center">
                <h1>后台登录界面</h1>
            </div>
            <div class="row">
                <form id="form" class="form">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default btn-block" id="loginButton" type="button">登录</button>
                    </div>
                </form>
                <div class="form-group text-center">
                    <button class="btn btn-secondary" id="showRegisterModal" data-toggle="modal" data-target="#registerModal">注册</button>
                </div>
            </div>
            <div id="test-credentials">
                <p>测试用户名: as</p>
                <p>测试密码: 123</p>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

<!-- 注册模态框 -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="registerModalLabel">注册</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!--注册表单-->
                <form id="registerForm" class="form">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="regUsername" id="regUsername" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="regPassword" id="regPassword" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码">
                    </div>
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" class="form-control" name="regEmail" id="regEmail" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div>
                            <label class="radio-inline">
                                <input type="radio" name="regSex" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="regSex" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default btn-block" id="registerButton" type="button">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
